```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串解码算法可视化</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }
        .code-block {
            background-color: #1e293b;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .stack-visualization {
            transition: all 0.5s ease;
        }
        .highlight {
            animation: highlight 2s ease-in-out;
        }
        @keyframes highlight {
            0% { background-color: rgba(255, 255, 0, 0.5); }
            100% { background-color: transparent; }
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
                    字符串解码算法可视化
                </h1>
                <p class="text-xl md:text-2xl max-w-3xl mx-auto opacity-90">
                    深入理解栈在"括号嵌套字符串解码"问题中的精妙应用
                </p>
                <div class="mt-10">
                    <div class="inline-flex items-center px-6 py-3 bg-white text-indigo-600 rounded-full font-medium text-lg hover:bg-opacity-90 transition duration-300">
                        <i class="fas fa-play mr-2"></i>
                        开始探索
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Problem Description -->
    <section class="py-16 px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full mr-4">
                    <i class="fas fa-question-circle text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">问题描述</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md p-8 card-hover">
                <p class="text-lg leading-relaxed mb-6">
                    给定一个经过编码的字符串，返回它解码后的字符串。编码规则为: <code class="bg-gray-100 px-2 py-1 rounded">k[encoded_string]</code>，表示其中方括号内部的 <code class="bg-gray-100 px-2 py-1 rounded">encoded_string</code> 正好重复 <code class="bg-gray-100 px-2 py-1 rounded">k</code> 次。
                </p>
                <div class="border-l-4 border-indigo-500 pl-4 mb-6">
                    <p class="italic text-gray-600">注意：你可以认为输入字符串总是有效的；没有额外的空格，方括号格式正确等。</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="font-semibold text-lg mb-2">示例 1:</h3>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="mb-1"><span class="font-medium">输入:</span> <code>s = "3[a]2[bc]"</code></p>
                            <p><span class="font-medium">输出:</span> <code>"aaabcbc"</code></p>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-semibold text-lg mb-2">示例 2:</h3>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="mb-1"><span class="font-medium">输入:</span> <code>s = "3[a2[c]]"</code></p>
                            <p><span class="font-medium">输出:</span> <code>"accaccacc"</code></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Core Concept -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-5xl mx-auto">
            <div class="flex items-center mb-8">
                <div class="bg-purple-100 text-purple-600 p-3 rounded-full mr-4">
                    <i class="fas fa-brain text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">核心考点与算法</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-gray-50 rounded-xl p-8 card-hover">
                    <h3 class="text-2xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-layer-group text-purple-500 mr-3"></i>
                        栈的应用
                    </h3>
                    <p class="text-gray-700 leading-relaxed mb-6">
                        栈(Stack)是一种后进先出(LIFO)的数据结构，非常适合处理嵌套结构的问题。在本问题中，每当遇到"["时，我们需要将当前状态(字符串和重复次数)压入栈中；遇到"]"时，从栈中弹出状态进行字符串构建。
                    </p>
                    <div class="bg-white p-4 rounded-lg shadow-inner">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-medium">时间复杂度:</span>
                            <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">O(n)</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="font-medium">空间复杂度:</span>
                            <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">O(n)</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-gray-50 rounded-xl p-8 card-hover">
                    <h3 class="text-2xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-sitemap text-indigo-500 mr-3"></i>
                        解题思路
                    </h3>
                    <ol class="list-decimal list-inside space-y-3 text-gray-700">
                        <li>使用两个栈：一个存储数字(重复次数)，一个存储字符串</li>
                        <li>遇到数字时，计算完整数字(考虑多位数情况)</li>
                        <li>遇到"["时，将当前字符串和数字压栈</li>
                        <li>遇到"]"时，出栈并构建重复字符串</li>
                        <li>普通字符直接追加到当前字符串</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <!-- Algorithm Visualization -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-5xl mx-auto">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4">
                    <i class="fas fa-project-diagram text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">算法可视化</h2>
            </div>
            
            <div class="mb-12">
                <div class="mermaid">
                    graph LR
                    A[输入字符串] --> B[遍历每个字符]
                    B --> C{字符类型}
                    C -->|数字| D[计算完整数字]
                    C -->|'['| E[压栈当前状态]
                    C -->|']'| F[出栈并构建字符串]
                    C -->|普通字符| G[追加到当前字符串]
                    D --> B
                    E --> B
                    F --> B
                    G --> B
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-code-branch text-blue-500 mr-3"></i>
                        栈操作演示
                    </h3>
                    <div class="stack-visualization bg-gray-100 rounded-lg p-4 h-64 mb-4">
                        <div class="flex justify-center h-full items-end space-x-2">
                            <div class="stack-item bg-indigo-500 text-white w-16 h-16 flex items-center justify-center rounded-t-lg transition-all duration-300">
                                Pair("", 2)
                            </div>
                            <div class="stack-item bg-purple-500 text-white w-16 h-24 flex items-center justify-center rounded-t-lg transition-all duration-300">
                                Pair("a", 3)
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition duration-300">
                            <i class="fas fa-step-forward mr-2"></i>
                            下一步
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-terminal text-green-500 mr-3"></i>
                        执行过程
                    </h3>
                    <div class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto">
                        <pre class="text-green-400 text-sm font-mono">
<span class="text-gray-500">// 输入: "3[a2[c]]"</span>
1. 读取 '3' → currNumber: 3
2. 读取 '[' → 压栈("", 3), 重置状态
3. 读取 'a' → currString: "a"
4. 读取 '2' → currNumber: 2
5. 读取 '[' → 压栈("a", 2), 重置状态
6. 读取 'c' → currString: "c"
7. 读取 ']' → 出栈 → 构建 "a" + "cc" = "acc"
8. 读取 ']' → 出栈 → 构建 "" + "accaccacc" = "accaccacc"
<span class="text-yellow-300">// 输出: "accaccacc"</span>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Solution Code -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-5xl mx-auto">
            <div class="flex items-center mb-8">
                <div class="bg-green-100 text-green-600 p-3 rounded-full mr-4">
                    <i class="fas fa-code text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">解决方案代码</h2>
            </div>
            
            <div class="code-block rounded-xl overflow-hidden shadow-lg card-hover">
                <div class="flex items-center px-4 py-3 bg-gray-800 text-gray-300">
                    <div class="flex space-x-2">
                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
                    </div>
                    <div class="ml-4 text-sm">Java</div>
                </div>
                <pre class="text-gray-300 p-6 overflow-x-auto"><code class="language-java">
<span class="text-purple-400">public</span> <span class="text-purple-400">class</span> <span class="text-blue-400">Solution</span> {
    <span class="text-purple-400">public</span> <span class="text-blue-400">String</span> <span class="text-yellow-300">decodeString</span>(<span class="text-blue-400">String</span> s) {
        <span class="text-green-500">// 使用栈来存储括号前的字符串和重复次数</span>
        <span class="text-blue-400">Stack</span>&lt;<span class="text-blue-400">Pair</span>&lt;<span class="text-blue-400">String</span>, <span class="text-blue-400">Integer</span>&gt;&gt; stack = <span class="text-purple-400">new</span> <span class="text-blue-400">Stack</span>&lt;&gt;();
        
        <span class="text-green-500">// 当前正在处理的字符串</span>
        <span class="text-blue-400">String</span> currString = <span class="text-orange-300">""</span>;
        <span class="text-green-500">// 当前正在处理的数字（重复次数）</span>
        <span class="text-purple-400">int</span> currNumber = <span class="text-amber-300">0</span>;
        
        <span class="text-green-500">// 遍历输入字符串的每个字符</span>
        <span class="text-purple-400">for</span> (<span class="text-purple-400">char</span> c : s.toCharArray()) {
            <span class="text-purple-400">if</span> (<span class="text-blue-400">Character</span>.isDigit(c)) {
                <span class="text-green-500">// 如果是数字，计算重复次数（可能是多位数）</span>
                currNumber = currNumber * <span class="text-amber-300">10</span> + (c - <span class="text-orange-300">'0'</span>);
            } <span class="text-purple-400">else</span> <span class="text-purple-400">if</span> (c == <span class="text-orange-300">'['</span>) {
                <span class="text-green-500">// 遇到左括号，将当前字符串和重复次数入栈，并重置当前变量</span>
                stack.push(<span class="text-purple-400">new</span> <span class="text-blue-400">Pair</span>&lt;&gt;(currString, currNumber));
                currString = <span class="text-orange-300">""</span>;
                currNumber = <span class="text-amber-300">0</span>;
            } <span class="text-purple-400">else</span> <span class="text-purple-400">if</span> (c == <span class="text-orange-300">']'</span>) {
                <span class="text-green-500">// 遇到右括号，出栈并构建重复字符串</span>
                <span class="text-blue-400">Pair</span>&lt;<span class="text-blue-400">String</span>, <span class="text-blue-400">Integer</span>&gt; pair = stack.pop();
                <span class="text-blue-400">String</span> prevString = pair.getKey();
                <span class="text-purple-400">int</span> repeatTimes = pair.getValue();
                
                <span class="text-green-500">// 将当前字符串重复指定次数，并与之前的字符串拼接</span>
                <span class="text-blue-400">StringBuilder</span> repeated = <span class="text-purple-400">new</span> <span class="text-blue-400">StringBuilder</span>();
                <span class="text-purple-400">for</span> (<span class="text-purple-400">int</span> i = <span class="text-amber-300">0</span>; i &lt; repeatTimes; i++) {
                    repeated.append(currString);
                }
                currString = prevString + repeated.toString();
            } <span class="text-purple-400">else</span> {
                <span class="text-green-500">// 如果是普通字符，直接添加到当前字符串</span>
                currString += c;
            }
        }
        
        <span class="text-green-500">// 返回最终解码后的字符串</span>
        <span class="text-purple-400">return</span> currString;
    }
}

<span class="text-green-500">// 辅助类，用于在栈中存储字符串和重复次数的键值对</span>
<span class="text-purple-400">class</span> <span class="text-blue-400">Pair</span>&lt;<span class="text-blue-400">K</span>, <span class="text-blue-400">V</span>&gt; {
    <span class="text-purple-400">private</span> <span class="text-blue-400">K</span> key;
    <span class="text-purple-400">private</span> <span class="text-blue-400">V</span> value;
    
    <span class="text-purple-400">public</span> <span class="text-yellow-300">Pair</span>(<span class="text-blue-400">K</span> key, <span class="text-blue-400">V</span> value) {
        <span class="text-purple-400">this</span>.key = key;
        <span class="text-purple-400">this</span>.value = value;
    }
    
    <span class="text-purple-400">public</span> <span class="text-blue-400">K</span> <span class="text-yellow-300">getKey</span>() {
        <span class="text-purple-400">return</span> key;
    }
    
    <span class="text-purple-400">public</span> <span class="text-blue-400">V</span> <span class="text-yellow-300">getValue</span>() {
        <span class="text-purple-400">return</span> value;
    }
}
                </code></pre>
            </div>
        </div>
    </section>

    <!-- Key Takeaways -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-indigo-50">
        <div class="max-w-5xl mx-auto">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full mr-4">
                    <i class="fas fa-lightbulb text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">关键要点</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="text-indigo-600 text-3xl mb-4">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">栈的特性</h3>
                    <p class="text-gray-700">后进先出(LIFO)特性完美匹配嵌套结构问题的处理，可以保存和恢复上下文状态。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-brackets-curly"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">嵌套处理</h3>
                    <p class="text-gray-700">遇到"["压栈当前状态，遇到"]"出栈并构建字符串，形成递归式处理。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="text-blue-600 text-3xl mb-4">
                        <i class="fas fa-expand"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">状态管理</h3>
                    <p class="text-gray-700">需要维护当前字符串和重复次数两个状态变量，处理多层嵌套时注意状态保存。</p>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Simple animation for stack visualization
        document.querySelector('.card-hover').addEventListener('mouseenter', function() {
            const stackItems = document.querySelectorAll('.stack-item');
            stackItems.forEach((item, index) => {
                setTimeout(() => {
                    item.classList.add('highlight');
                }, index * 300);
            });
        });
    </script>
</body>
</html>
```